<template>
  <div class="cms-member" :class="member ? `style_${type}` : `style_${type} bg-white`">
    <div v-if="type !== 3" class="is-member">
      <div class="member-text">
        <div class="title">
          <div class="mr-[6px]">占位</div>
          黄金VIP会员
        </div>
        <div class="des">会员有效期至：2022-10-09</div>
      </div>
      <div class="member-btn">
        <p class="text-center">立即续费</p>
        <right-outlined v-if="type === 1" class="mt-[7px]" style="color: #866a47" />
      </div>
    </div>

    <div class="not-member" v-if="!member">
      <div class="member-text">
        <div class="title">
          <div class="mr-[6px]">占位</div>
          您还不是会员
        </div>
        <div v-if="type !== 3" class="des">开通会员免费观看所有视频</div>
      </div>
      <div class="member-btn">
        <div class="text-center type-3">开通会员</div>
        <right-outlined v-if="type === 1" class="mt-[7px]" style="color: #000000" />
      </div>
      <div v-if="type === 3" class="arrow-right">
        <arrow-right-outlined style="color: #ffe479; margin-left: 3px; align-self: center" />
      </div>
    </div>

    <div v-if="type === 3" class="is-member">
      <div class="member-text">
        <div class="title">
          <div class="mr-[6px]">占位</div>
          黄金VIP会员
        </div>
        <div class="des">会员有效期至：2022-10-09</div>
      </div>
      <div class="member-btn">
        <p class="text-center">立即续费</p>
      </div>
      <div class="arrow-right">
        <arrow-right-outlined style="color: #ffe479; align-self: center; margin-left: 3px" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import cmsVipMemberProps from './props'
import { RightOutlined, ArrowRightOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  props: cmsVipMemberProps,
  data() {
    return {
      baseUrl: '/src/components/cms/components/'
    }
  },
  components: {
    RightOutlined,
    ArrowRightOutlined
  }
})
</script>

<style scoped lang="less">
.cms-member {
  width: 375px;
  //   background-color: #fff;
  @apply p-4 flex flex-col gap-y-6;

  .des {
    font-size: 11px;
    color: #000;
    font-weight: 400;
    margin-top: 8px;
  }
  .is-member {
    height: 69px;
    background: #fae2c4;
    border-radius: 13px 13px 0 0;
    color: #866a47;

    @apply flex justify-between  px-4 py-3;
    .des {
      color: #866a47;
    }
  }
  .member-btn {
    width: 86px;
    height: 28px;
    line-height: 31px;
    padding: 0 7px;
    margin-top: 10px;
    background: #fff0e1;
    border-radius: 14px;
  }
  .not-member {
    height: 69px;
    background-image: linear-gradient(135deg, #e7eaec 0%, #c0c0c0 100%);
    color: #866a47;
    border-radius: 13px 13px 0 0;
    .title {
      color: #000;
      @apply text-base leading-6 font-medium;
    }
    @apply flex justify-between px-4 py-3;
  }

  &.style_1 {
    .title {
      @apply flex flex-row text-base leading-6 font-medium;
    }
    .des {
      font-size: 11px;
      font-weight: 400;
      margin-top: 8px;
    }
    .member-btn {
      @apply flex justify-between;
    }
    .not-member {
      .member-btn {
        background: #f2f2f2;
        color: #000;
      }
    }
  }
  &.style_2 {
    .title {
      @apply flex flex-row text-[#000] text-base leading-6 font-medium;
    }
    .member-btn {
      background-image: linear-gradient(134deg, #645842 0%, #332f26 100%);
    }
    .is-member {
      border-radius: 8px;
      background-image: linear-gradient(90deg, #fff1c4 0%, #fed685 100%);
    }
    .not-member {
      border-radius: 8px;

      background-image: linear-gradient(135deg, #eaedf0 0%, #bdc2c5 100%);
    }
    .des {
      color: #000;
    }
  }
  &.style_3 {
    .title {
      @apply flex flex-row text-base leading-6 font-medium;
    }
    .is-member,
    .not-member {
      padding-top: 16px;
      padding-right: 16px;
    }
    .is-member {
      height: 80px;
      border-radius: 8px;

      background-image: linear-gradient(90deg, #ffecad 0%, #fff2d7 100%);
      color: #000;
      .des {
        margin-left: 40px;
        font-size: 12px;
        color: #000;
      }
    }
    .arrow-right {
      width: 20px;
      height: 20px;
      background: #5c432e;
      border-radius: 50%;
    }
    .member-btn {
      font-size: 14px;
      line-height: 20px;
      margin: 0;
      background-color: transparent;
      @apply flex flex-1 justify-end;
    }

    .not-member {
      height: 56px;
      border-radius: 8px;
      .member-btn {
        font-size: 16px;
        .arrow-right {
          background: #5c432e;
        }
      }
    }
  }
}
</style>
